<template>
  <div class="cart-container">
    <h2 class="cart-title">杜梦伟的药品购物车</h2>
    <table class="cart-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>图片</th>
          <th>药品名</th>
          <th>价格</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(dmwItem, dmwIndex) in dmwDrugs" :key="dmwIndex">
          <td>{{ dmwIndex + 1 }}</td>
          <td>
            <img :src="dmwItem.image" alt="药品图片" class="cart-image">
          </td>
          <td>{{ dmwItem.name }}</td>
          <td>{{ dmwItem.price }}</td>
          <td class="quantity-cell">
            <button @click="decreaseQuantity(dmwIndex)">-</button>
            {{ dmwItem.quantity }}
            <button @click="increaseQuantity(dmwIndex)">+</button>
          </td>
          <td>
            <button @click="removeDrug(dmwIndex)">删除</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="4">总价钱为</td>
          <td>{{ dmwTotalPrice }}</td>
        </tr>
        <tr>
          <td colspan="4">药品总数量为</td>
          <td>{{ dmwTotalQuantity }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dmwDrugs: [
        {
          name: '晚风告白',
          price: 25,
          quantity: 1,
          image: new URL('./assets/3.png', import.meta.url).href
        },
        {
          name: '会不会',
          price: 36,
          quantity: 1,
          image: new URL('./assets/208.png', import.meta.url).href
        },
        {
          name: '恋爱告急',
          price: 28,
          quantity: 1,
          image: new URL('./assets/2208.jpg', import.meta.url).href
        },
        {
          name: '解相思',
          price: 18,
          quantity: 1,
          image: new URL('./assets/2.jpg', import.meta.url).href
        },
        {
          name: '冬眠',
          price: 30,
          quantity: 1,
          image: new URL('./assets/image.png', import.meta.url).href
        }
      ]
    };
  },
  computed: {
    dmwTotalPrice() {
      return this.dmwDrugs.reduce((acc, dmwItem) => acc + dmwItem.price * dmwItem.quantity, 0);
    },
    dmwTotalQuantity() {
      return this.dmwDrugs.reduce((acc, dmwItem) => acc + dmwItem.quantity, 0);
    }
  },
  methods: {
    decreaseQuantity(dmwIndex) {
      if (this.dmwDrugs[dmwIndex].quantity > 1) {
        this.dmwDrugs[dmwIndex].quantity--;
      }
    },
    increaseQuantity(dmwIndex) {
      this.dmwDrugs[dmwIndex].quantity++;
    },
    removeDrug(dmwIndex) {
      this.dmwDrugs.splice(dmwIndex, 1);
    }
  }
};
</script>

<style>
/* 整体容器样式 */
.cart-container {
  width: 90%;
  margin: 30px auto;
}

/* 标题样式 */
.cart-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
}

/* 表格样式 */
.cart-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 固定表格列宽 */
}

/* 表头和单元格样式 */
.cart-table th,
.cart-table td {
  text-align: center;
  padding: 10px;
  border: 1px solid #ccc;
}

/* 图片样式 */
.cart-image {
  width: 50px;
  height: 50px;
}

/* 数量单元格样式 */
.quantity-cell {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 数量按钮样式 */
.quantity-btn {
  width: 30px;
  height: 30px;
  margin: 0 5px;
  padding: 0;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
}

/* 删除按钮样式 */
.remove-btn {
  padding: 6px 12px;
  border: none;
  background-color: #e74c3c;
  color: white;
  cursor: pointer;
}
</style>